<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>中国空间站</title>
	<link href="../mycss.css" rel="stylesheet" type="text/css">

<style>
	#kongjianzhan{
		position: absolute;
	}
	#kjziamge{
		position: absolute;
	}
	.circle{
		background: white;
		position: absolute;
		cursor:pointer;
		opacity: 0;
		height: 30px;
		width:30px;
	}
	
	#te1{
		width:300px;
	}
	#te2{
		width:300px;
	}
	#te3{
		width:300px;
	}
	#te4{
		width:340px;
	}
	#te5{
		width:350px;
	}
	#te6{
		width:390px;
	}
	#te7{
		width:390px;
	}
	#te8{
		width:300px;
	}
	#te9{
		width:340px;
	}
	#te10{
		width:300px;
	}
	#te11{
		width:370px;
	}
	.words{
		position: absolute;
		opacity: 0;
		transition:opacity 1s;
		-moz-transition: opacity 1s; /* Firefox 4 */
		-webkit-transition:opacity 1s; /* Safari and Chrome */
		-o-transition:opacity 1s; /* Opera */
	}
	.words p{
		color: #fff;
	}
	.words img{
		width:30%;
	}
	
	
	</style>
</head>

<body onResize="imgSize()">
			<div id="header">
	<div id="rightfloat"><a href="../index.html"></a></div>
	
    
<!--    <div class="dropdown">
    <a href="介绍网页.html" class="dropbtn">关于我们</a>
    <div class="dropdown-content">
      <a href="朱珈印.html">朱珈印</a>
    		<a href="赵哲.html">赵哲</a>
			<a href="liaoyanyan.html">廖彦琰</a>
			<a href="张晶晶.html">张晶晶</a>
			<a href="章明惠.html">章明惠</a>
			<a href="李凌.html">李凌</a>
    </div>
		</div> -->
		
<div class="dropdown">
    <a href="天文学史.html" class="dropbtn">天文学史</a>
</div>
	 <div class="dropdown">
    		<a href="天象游览.html" class="dropbtn">天象游览</a>
    	<div class="dropdown-content">
      		<a href="希腊神秘传说.html">希腊神秘传说</a>
			<a href="星座小知识.html">星座小知识</a>
    	</div>
	</div>
 <div class="dropdown">
    		<a href="深空勘测.html" class="dropbtn">深空勘测</a>
	 	<div class="dropdown-content">
      		<a href="空间站.html">中国空间站</a>
    	</div>
	</div>
<div class="dropdown">
    		<a href="星系与宇宙.html" class="dropbtn">星系与宇宙</a>
    	<div class="dropdown-content">
      		<a href="银河系.html">银河系</a>
    	</div>
	</div>
   <div class="dropdown">
    		<a href="走近太阳系.html" class="dropbtn">走近太阳系</a>
    	<div class="dropdown-content">
      		<a href="太阳.html">太阳</a>
			<a href="地球.html">地球</a>
			<a href="月球.html">月球</a>
    	</div>
	</div>	
</div>
			<div id="hdspace"></div>
	<div class="tiaozi">
		<p class="left"><a href="../index.html">首页</a>＞<a href="深空勘测.html">深空勘测</a>＞<strong>中国空间站</strong></p>
	</div>
<div id="kongjianzhan">
		<img id="kjziamge" alt="picture" src="../images/kongjianzhan.jpg" >
	</div>
	<div  class="words" id="te1">
		<h1>中国空间站</h1>
		<p>空间站是中国载人航天工程「三步走」战略的最高目标，中国将在2020年前后建成空间站</p>
	</div>
	<div class="words"  id="te2">
		<h1>载人飞船</h1>
		<p>已经命名的“神舟”号飞船</p>
	</div>
	<div class="words"  id="te3">
		<h1>货运飞船</h1>
		<p>空间站的地面后勤保障系统。主要任务一是补给空间站的推进剂消耗；二是运送航天员工作和生活用品；三是运送空间科学实验设备和用品。</p>
	</div>
	<div  class="words" id="te4">
		<h1>核心舱</h1>
		<p>20吨级，有五个对接口。为航天员提供居住环境，支持航天员的长期在轨驻留，支持飞船和扩展模块对接停靠并开展少量的空间应用实验，是空间站的管理和控制中心。</p>
	</div>
	<div  class="words" id="te5">
		<h1>实验舱I</h1>
		<p>核心舱以组合体控制任务为主，实验舱II以应用实验任务为主，实验舱I则兼有二者功能。</p>
	</div>
	<div  class="words" id="te6">
		<h1>实验舱II</h1>
		<p>以应用实验任务为主。具备独立飞行功能，与核心舱对接后形成组合体，可开展长期在轨驻留的空间应用和新技术试验，并对核心舱平台功能予以备份和增强。</p>
	</div>
	<div  class="words" id="te7">
		<h1>规模适度原则</h1>
		<p>中国空间站是可以进一步扩展的，根据空间科学研究和应用的需要，可以对接更多的舱段。空间站的研发，遵循了规模适度原则，有利于控制工程的成本，重点突出载人航天的特色，突出发挥人在太空中的作用。</p>
	</div>
	<div  class="words" id="te8">
		<img alt="picture" src="../images/jixiebi.png">
		<h1>机械臂</h1>
		<p>长度累计15米。一名航天员在舱内操作机械臂，一名航天员在舱外太空行走。完成舱段转位、大设备和航天员自身的移动。</p>
	</div>
	<div  class="words" id="te9">
		<h1>搭载物品</h1>
		<p>包括生物学、材料科学、基础物理、微重力、流体、燃烧等十余大类的科学研究实验设施。</p>
	</div>
	<div class="words"  id="te10">
		<h1>柔性太阳翼</h1>
		<p>空间站的电源系统。单翼翼展约30米，为空间站提供可靠、充足的不间断供电。</p>
	</div>
	<div class="words"  id="te11">
		<h1>航天员</h1>
		<p>从现役空军飞行员中选拔，主要承担航天器驾驶任务。空间站将开展太空科学实验，除了良好的身体素质这个共性要求外，未来需要不同类型的航天员，尤其是工程师和科学家。</p>
		<img alt="picture" src="../images/yuhangyuan.png">
	</div>
	<div class="circle" id="cir1" onmouseover="see('te1')" onmouseout="notsee('te1')">1</div>
	<div class="circle" id="cir2" onmouseover="see('te10')" onmouseout="notsee('te10')">2</div>
	<div class="circle" id="cir3" onmouseover="see('te11')" onmouseout="notsee('te11')">3</div>
	<div class="circle" id="cir4" onmouseover="see('te2')" onmouseout="notsee('te2')" >4</div>
	<div class="circle" id="cir5" onmouseover="see('te6')" onmouseout="notsee('te6')">5</div>
	<div class="circle" id="cir6" onmouseover="see('te8')" onmouseout="notsee('te8')">6</div>
	<div class="circle" id="cir7" onmouseover="see('te5')" onmouseout="notsee('te5')" >7</div>
	<div class="circle" id="cir8" onmouseover="see('te4')" onmouseout="notsee('te4')">8</div>
	<div class="circle" id="cir9" onmouseover="see('te7')" onmouseout="notsee('te7')">9</div>
	<div class="circle"  id="cir10" onmouseover="see('te3')" onmouseout="notsee('te3')">10</div>
	<div class="circle" id="cir11" onmouseover="see('te9')" onmouseout="notsee('te9')">11</div>
	

	
<script type="text/javascript">
			var x=document.getElementById("kjziamge");
			var c=document.getElementsByClassName("circle");
			var c1=document.getElementById("cir1"),
					c2=document.getElementById("cir2"),
					c3=document.getElementById("cir3"),
					c4=document.getElementById("cir4"),
					c5=document.getElementById("cir5"),
					c6=document.getElementById("cir6"),
					c7=document.getElementById("cir7"),
					c8=document.getElementById("cir8"),
					c9=document.getElementById("cir9"),
					c10=document.getElementById("cir10"),
					c11=document.getElementById("cir11"),
					t1=document.getElementById("te1"),
					t2=document.getElementById("te2"),
					t3=document.getElementById("te3"),
					t4=document.getElementById("te4"),
					t5=document.getElementById("te5"),
					t6=document.getElementById("te6"),
					t7=document.getElementById("te7"),
					t8=document.getElementById("te8"),
					t9=document.getElementById("te9"),
					t10=document.getElementById("te10"),
					t11=document.getElementById("te11");
			function imgSize(){
				var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
				var h=window.innerHeight ||
							document.documentElement.clientHeight || 
							document.body.clientHeight;
				x.width=w;
				x.height=w/1.872;
				for (var i=0;i<c.length;i++){
					c[i].style.width=w*0.015+"px";
					c[i].style.height=w*0.015+"px";
				}
				c1.style.marginLeft=w/24.69*1.4+"px";
				c2.style.marginLeft=w/24.69*9+"px";
				c3.style.marginLeft=w/24.69*10.9+"px";
				c4.style.marginLeft=w/24.69*16.81+"px";
				c5.style.marginLeft=w/24.69*9.43+"px";
				c6.style.marginLeft=w/24.69*14.63+"px";
				c7.style.marginLeft=w/24.69*20.47+"px";
				c8.style.marginLeft=w/24.69*14+"px";
				c9.style.marginLeft=w/24.69*1.61+"px";
				c10.style.marginLeft=w/24.69*11.2+"px";
				c11.style.marginLeft=w/24.69*15+"px";
				c1.style.marginTop=x.height/13.16*1.3+"px";
				c2.style.marginTop=x.height/13.16*0.59+"px";
				c3.style.marginTop=x.height/13.16*2.74+"px";
				c4.style.marginTop=x.height/13.16*3.37+"px";
				c5.style.marginTop=x.height/13.16*5.13+"px";
				c6.style.marginTop=x.height/13.16*6.82+"px";
				c7.style.marginTop=x.height/13.16*7+"px";
				c8.style.marginTop=x.height/13.16*8.23+"px";
				c9.style.marginTop=x.height/13.16*9.15+"px";
				c10.style.marginTop=x.height/13.16*9.54+"px";
				c11.style.marginTop=x.height/13.16*10.18+"px";
				t1.style.marginTop=x.height/13.16*0.6+"px";
				t1.style.marginLeft=w/24.69*2+"px";
				t2.style.marginTop=x.height/13.16*1.37+"px";
				t2.style.marginLeft=w/24.69*16.81+"px";
				t3.style.marginTop=x.height/13.16*9.54+"px";
				t3.style.marginLeft=w/24.69*5.2+"px";
				t4.style.marginTop=x.height/13.16*8.5+"px";
				t4.style.marginLeft=w/24.69*14.4+"px";
				t5.style.marginTop=x.height/14.16*7+"px";
				t5.style.marginLeft=w/24.69*16.47+"px";
				t6.style.marginTop=x.height/13.16*5.13+"px";
				t6.style.marginLeft=w/24.69*5+"px";
				t7.style.marginTop=x.height/13.16*9+"px";
				t7.style.marginLeft=w/24.69*2+"px";
				t8.style.marginTop=x.height/13.16*7.5+"px";
				t8.style.marginLeft=w/24.69*14.6+"px";
				t9.style.marginTop=x.height/13.16*10.4+"px";
				t9.style.marginLeft=w/24.69*16+"px";
				t10.style.marginTop=x.height/13.16*0.8+"px";
				t10.style.marginLeft=w/24.69*9+"px";
				t11.style.marginTop=x.height/13.16*0.4+"px";
				t11.style.marginLeft=w/24.69*12+"px";
			}
			function see(id){
				o=document.getElementById(id);
				o.style.opacity=1;
			}
			function notsee(id){
				o=document.getElementById(id);
				o.style.opacity=0;
			}
			window.onload=imgSize();

	
	
	
	</script>

</body>
</html>
